前幾天聊到了 Rive 的優缺點，今天會把 Rive 跟其他前端的動畫技術做一個比較，主要有 Lottie、雪碧圖 / GIF / SVG / 影片、Unity / PixiJS / Cocos、以及前端手刻這四個層面。

Lottie

這應該是跟 Rive 最像的技術了，但如同 Day 01 說的一樣，Lottie 是靜態的，不能帶參數或是跟使用者互動，所以 Lottie 不太可能做出這種遊戲。其實 Rive 給我的感覺是，他們本來只是想打敗 Lottie，但是做一做後發現好像也可以做成遊戲引擎，所以最近有越來越往遊戲走的趨勢，不完全只是用在網頁上而已。

撇除掉互動性這塊，根據 Rive 官網的資料，Rive 的檔案大小比 Lottie 小 90%，而且 Lottie 的工作流程又多了幾個步驟，所以理論上來說，就算不會用到互動性的功能，Rive 在檔案大小與開發速度上也是比較好的選擇。

當然這是他們家官網的說法，給大家做一個參考。另外嚴格說起來 Rive 因為要學一個 Rive Editor，所以相對於 Lottie 初期會有一些學習成本，雖然這種投資最終還是很划算，但如果是一個比較需要成本控管或是即戰力的團隊，那的確這是一個小缺點。

雪碧圖 / GIF / SVG / 影片

這四者我覺得是相對簡單的動畫實作方式，幾乎每個前端都會（吧），視覺效果很不錯，學習成本低，溝通成本也低，甚至也很方便外包。但缺點也非常明顯，除了缺乏互動性以外，他們的檔案容量很大，非常容易成為載入時的效能瓶頸，或是拉低 lighthouse 等網頁評鑑工具的分數。

就我的經驗來說，在產品生命週期的初期，用這些技術做動態效果無可厚非，但有時間的話也有投資一點技術在 Rive 或 Lottie 等比較現代的技術上，或者至少要做一點預處理，例如預載或是快取。

Unity / PixiJS / Cocos

這些是更專業的動畫技術，無論是視覺效果還是效能，基本上都遠超 Rive，而且可以做到 Rive 最欠缺的 3D 效果，但缺點是成本實在太高了。無論是工程師的實作成本、與設計師的溝通成本、或是工程師自己的學習成本，都高於 Rive 不只一個層級。一個前端工程師花一個月，通常就可以用 Rive 開發產品，這在 Unity 或是 PixiJS 不太可能做得到，通常需要再請一個專業的工程師處理這一塊，這是站在團隊的角度。

站在工程師個人職涯的角度也是，沒有半年一年應該學不好這些技術，就算學好了，除非有意願往動態或遊戲開發這一塊下去鑽研，否則其實有點限制了未來的發展廣度。同樣的時間，拿去多學一個前端框架，多學一後端語言，甚至多刷幾題 Leetcode，最終誰的薪水高不好說，但通常後者未來會比較好找工作。Cocos 就不用說了，沒錯它在特定的情境或產業非常好用，但它其實有點像是……人生陷阱屠龍之技，有遇到再去學就好，不用馬上跳入火坑。

從以上的討論可以得知，Rive 其實有點像 React Native，在生態系中剛好卡到一個不錯的位置。它不會是某個方面最好的選擇，但平均來說，它是各方面最通用的選擇。

前端手刻

直接用 JavaScript 或 CSS 手刻動畫的神人，其實比想像中多很多（respect），但如果你跟我一樣只是凡夫俗子打工仔，我會說沒事還是不要自己造輪子比較好，各種成本實在太高了。不一定要用 Rive，但如果常常有做動畫的需求的話，還是站在巨人的肩膀上，用一些前人已經做過的技術比較好。